<link rel="import" href="../../../module.html">
<link rel="import" href="../../../lang.html">
<link rel="import" href="../../../annotations/annotations.html">

<link rel="import" href="../../bind.html">
<link rel="import" href="../../bind-effects.html">
<link rel="import" href="../../bind-annotations.html">

<template>

  <div>annotated #foo span:</div>
  <br>
  <span id="foo" attribute="{{path}}" oneway="[[otherpath]]" style="{{specialStyle}}">{{text}}</span>

</template>

<script>

  // TODO(sjmiles): should 'bind-annotations' blend the other two modules
  // somehow so we don't need to include all three here?
  using(['Annotations', 'bind', 'bind-annotations'], 

   function(Annotations, Bind, BindAnnotations) {

    var out = document.querySelector('#abd');
    out.innerHTML += '<hr><h3>annotations-bind demo</h3><hr>';

    // phase one: prototyping

    var prototype = {};
    var template = currentImport.querySelector('template');
    var list = Templabindinate(prototype, template);

    // phase two: instancing
    
    var model = Object.create(prototype);
    var dom = Instancinance(model, template);
    document.body.appendChild(dom);

    // affect model

    model.text = 'Hello from Model';
    model.path = 'path';
    model.otherpath = 'other.path';
    model.specialStyle = {backgroundColor: "red"};

    // effects visible in dom

    var foo = dom.querySelector('#foo');
    out.innerHTML += 
      'foo.<b>path</b> = "' + model.path + '"<br>'
      + 'foo.<b>otherpath</b> = "' + model.otherpath + '"<br>'
      + 'foo.<b>specialStyle</b> = "' + JSON.stringify(model.specialStyle)+ '"<br>'
      ;

    // ad hoc abstractions
    
    function Templabindinate(model, template) {
      Bind.prepareModel(model);
      var list = Annotations.parseAnnotations(template);
      BindAnnotations.addEffects(model, list);
      return list;
    }

    function Instancinance(model, template) {
      Bind.prepareInstance(model);
      Bind.createBindings(model);
      var dom = document.importNode(template.content, true);
      model._nodes = BindAnnotations.marshalAnnotatedNodes(model._nodes, dom, 
        Annotations.findAnnotatedNode);
      return dom;
    }

  });

</script>